<template>
	<!-- 我的消息页面 -->
	<div class="myNews">
		<NewsHeader :isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder" 
			:aimUrl = 'dataArr.aimUrl'
			/>
		<div class="myNewsNav">
			<span>交易物流</span>
			<span class="active">通知</span>
			<span>互动</span>
		</div>
		<div class="myNewsContent">
			<div class="newsList">
				<i class="iconfont icon-laba1 tongZhi"></i>
				<p class="textTitle">
					<span>宜居租房</span>
					<span>14:32</span>
				</p>
				<p class="textCont">
					<span>恭喜你！您预订的东城区-安外大街3号院1室1厅1卫—44m2房源付款成功期待您的入住。</span>
				</p>
			</div>
			<div class="newsList">
				<i class="iconfont icon-laba1 tongZhi"></i>
				<p class="textTitle">
					<span>宜居租房</span>
					<span>14:32</span>
				</p>
				<p class="textCont">
					<span>恭喜你！您预订的东城区-安外大街3号院1室1厅1卫—44m2房源付款成功期待您的入住。</span>
				</p>
			</div>
		</div>
	</div>
</template>
<script>
import NewsHeader from '../../components/shopheader'
export default{
	name:'wonews',
	components:{
		NewsHeader
	},
	data(){
		return{
			dataArr:{
					isInput:false,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:""
						}
					],
					placeholder:"我的消息",
					aimUrl:'/layout/home'
			}
		}
	}
}	
</script>
<style scoped lang='less'>
.myNews{
	width: 100%;
	height: auto;
	.myNewsNav{
		width: 100%;
		height: 80 / 100rem;
		margin-top:88 / 100rem; 
		background-color: #fff;
		border-top:1px solid #f3f3f3;
		box-shadow: 0 0 14 / 100rem rgba(0, 0, 0, 0.1); 
		position: relative;
		span{
			display: inline-block;
			color: rgba(0, 0, 0, 0.8);
			font-size: 30 / 100rem;
			font-weight: 600;
			font-family: '微软雅黑'
		}
		span:nth-child(1){
			position: absolute;
			left: 70 / 100rem;
			top: 28 / 100rem;
			bottom: 28 / 100rem;
		}
		span:nth-child(2){
			position: absolute;
			left: 347 / 100rem;
			top: 28 / 100rem;
		}
		span:nth-child(3){
			position: absolute;
			right: 100 / 100rem;
			top: 28 / 100rem;
			bottom: 28 / 100rem;
		}
		.active{
			color: #ff5555;
		}
	}
	.myNewsContent{
		width: 100%;
		height: auto;
		padding-top: 41 / 100rem;
		padding-left: 100 / 100rem;
		padding-right: 100 / 100rem;
		box-sizing: border-box;
		.newsList{
			width: 550 / 100rem;
			height: 291 / 100rem;
			border-radius: 8 / 100rem;
			box-shadow: 0 0 14 / 100rem rgba(0, 0, 0, 0.1);
			overflow: hidden;
			position: relative;
			margin-bottom: 20 / 100rem;
			.tongZhi{
				color: #ff5555;
				font-size: 60 / 100rem;
				position: absolute;
				left: 20 / 100rem;
				top: 36 / 100rem;
			}
			.textTitle{
				overflow: hidden;
				span{
					color: rgba(0, 0, 0, 0.8);
					font-size: 24 / 100rem;
					font-weight: 500;
					font-family: '微软雅黑';
					position: absolute;
				}
				span:nth-child(1){
					top:46 / 100rem;
					left:96 / 100rem;
				}
				span:nth-child(2){
					top:83 / 100rem;
					left:96 / 100rem;
				}
			}
			.textCont{
				span{
					color: rgba(0, 0, 0, 0.8);
					font-size: 24 / 100rem;
					font-weight: 500;
					font-family: '微软雅黑';
					line-height: 30 / 100rem;
					position: absolute;
					top:155 / 100rem;
					left:96 / 100rem;
					right:67 / 100rem;
				}
			}
		}
	}
}	
</style>